<template>
    <div class="table-box">
        <div class="table_container">
            <el-table
                v-if="tableData.length > 0"
                :data='tableData'
                border
                :default-sort = "{prop: 'createTime'}"
                style="width: 100%">
                 <el-table-column
                    prop="name"
                    label="新闻"
                    align='center'>
                </el-table-column>
                <el-table-column
                    prop="category"
                    label="分类"
                    align='center'>
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ filterCategory[scope.row.category] }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    align='center'
                    sortable>
                    <template slot-scope="scope">
                        <el-icon name="time"></el-icon>
                        <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align='center'
                    label="操作">
                    <template slot-scope='scope'>
                        <el-button 
                            type="warning" 
                            icon='edit' 
                            size="small"
                            @click='onEdit(scope.row)'
                        >编辑</el-button>
                        <el-button 
                            type="danger" 
                            icon='delete' 
                            size="small"
                            @click='onDelete(scope.row,scope.$index)'
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
             <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.page_sizes"
                            :page-size="paginations.page_size"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page.sync='paginations.page_index'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>

export default {
  name: "fundlist",
  data() {
    return {
      tableData: [],
      allTableData: [],
      filterTableData: [],
      //需要给分页组件传的信息
      paginations: {
        page_index: 1, // 当前位于哪页
        total: 0, // 总数
        page_size: 5, // 1页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
      },
      get_pagination: {}, // 获取回来的页数信息
      filterCategory: {
        activity: "最新活动",
        information: "公司资讯",
        trends: "公司动态"
      }
    };
  },
  created() {
    this.getNews();
  },
  methods: {
    getNews() {
      // 获取表格数据
      this.$axios("/api/news").then(res => {
        // this.tableData = res.data;
        console.log(res.data)
        this.allTableData = res.data.result.list;
        this.filterTableData = res.data.result.list;
        this.get_pagination = res.data.result.pagination;
        // 设置分页数据
        this.setPaginations();
      });
    },
    onEdit(row) {
        this.$router.push({ name: 'Markdown', query: { id: row._id, type: row.type, category: row.category }});
    },
    onDelete(row, index) {
      // 删除
      this.$axios.delete(`/api/news/delete/${row._id}`).then(res => {
        // this.$message("删除成功");
        if (res.data.errno === 0) {
             this.$message({
                message: res.data.msg,
                type: 'success'
            })
            this.getNews()
            return
        }
        this.$message({
            message: "删除失败！请稍后重试！",
            type: 'error'
        })
      });
    },
    handleCurrentChange(page) {
      // 当前页
      let sortnum = this.paginations.page_size * (page - 1);
      let table = this.allTableData.filter((item, index) => {
        return index >= sortnum;
      });
      // 设置默认分页数据
      this.tableData = table.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    handleSizeChange(page_size) {
      // 切换size
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
    setPaginations() {
      // 总页数
      this.paginations.total = this.get_pagination.total;
      this.paginations.page_index = this.get_pagination.page;
      this.paginations.page_size = this.get_pagination.size;
      // 设置默认分页数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
  }
};
</script>
<style scoped>
.table-box {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
</style>